#index {
  background-color: #000000;
  width: 100%;
  height: 100vh; }
  #index * {
    color: #D3D6DD; }
  #index .bg {
    padding: 1rem;
    background-image: url("../pageBg.png"); }
  #index .host-body .title {
    position: relative;
    width: 500px;
    text-align: center;
    background-size: cover;
    background-repeat: no-repeat; }
    #index .host-body .title .title-text {
      font-size: 2rem;
      position: absolute;
      bottom: 0px;
      left: 50%;
      transform: translate(-50%); }
    #index .host-body .title .title-bototm {
      position: absolute;
      bottom: -30px;
      left: 50%;
      transform: translate(-50%); }
  #index .host-body .react-left {
    cursor: pointer;
    font-size: 1.3rem;
    width: 300px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    transform: skewX(-45deg); }
    #index .host-body .react-left .react-after {
      position: absolute;
      right: -25px;
      top: 0px;
      height: 50px;
      width: 50px;
      background-color: #0f1325;
      transform: skewX(45deg); }
    #index .host-body .react-left .text {
      display: inline-block;
      transform: skewX(45deg); }
  #index .host-body .react-right {
    cursor: pointer;
    font-size: 1.3rem;
    width: 300px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    transform: skewX(45deg); }
    #index .host-body .react-right .react-before {
      position: absolute;
      left: -25px;
      top: 0px;
      height: 50px;
      width: 50px;
      background-color: #0f1325;
      transform: skewX(-45deg); }
    #index .host-body .react-right .text {
      display: inline-block;
      transform: skewX(-45deg); }
  #index .host-body .body-box {
    margin-top: 1rem;
    display: flex;
    flex-direction: column; }
    #index .host-body .body-box .content-box {
      display: grid;
      grid-template-columns: 3fr 4fr 3fr; }
    #index .host-body .body-box .bototm-box {
      margin-top: 10px;
      display: grid;
      grid-template-columns: repeat(2, 50%); }
